<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: zoud
  Date: 27/09/2016
  Time: 00:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Database Commons - Browse</title>
    <link href="${host}/static/css/select2.min.css" rel="stylesheet"/>

</head>
<body>
<div class="panel panel-default">
    <ol class="breadcrumb" style="margin-bottom: 0">
        <li><a href="${host}/">Home</a></li>
        <li class="active">Browse</li>
    </ol>
    <div class="panel-body">

        <form action="${host}/database/browse" method="get">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Data Type</label>
                        <select name="dataType" id="dataType" class="form-control">
                            <option value="">All</option>
                            <c:forEach items="${dataTypeList}" var="dt">
                                <option value="${dt}">${dt}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Organism</label>
                        <select name="organism" id="organism" class="form-control">
                            <option value="">All</option>
                            <c:forEach items="${organismList}" var="orm">
                                <option value="${orm}">${orm}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Country / Region</label>
                        <select name="country" id="country" class="form-control">
                            <option value="">All</option>
                            <c:forEach items="${countryList}" var="cl">
                                <option value="${cl}">${cl}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="col-md-offset-4 col-md-4">
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-success btn-block"/>
                    </div>
                </div>
            </div>

        </form>

        <hr>
        Show
        <select name="length" class="length">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        entities
        <br>
        <br>
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hovered">
                <thead>
                <tr>
                    <th>Database name</th>
                    <th>Data type(s)</th>
                    <th>Major organism(s)</th>
                    <th>Location</th>
                    <th>Citation *</th>
                    <th>Status</th>
                    <th>z-index</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${biodbs}" var="db">
                    <tr>
                        <td><a href="${host}/database/id/${db.dbId}">${db.shortName}</a> <br>${db.fullName} <br><a
                                href="${db.url}" target="_blank"><i
                                class="fa fa-link"></i></a>
                        </td>
                        <td>
                            <ul>
                                <c:forEach items="${db.dataTypeList}" var="dt">
                                    <li><a href="${host}/database/browse?dataType=${dt.datatypeName}&organism=&country=">${dt.datatypeName}</a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </td>
                        <td>
                            <ul>
                                <c:forEach items="${db.organismList}" var="osm">
                                    <li><a href="${host}/database/browse?organism=${osm.organismName}&country=&dataType=">${osm.organismName}</a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </td>
                        <td>${db.country}</td>
                        <td>${db.getCitationNumber(db.publicationList)}</td>
                        <td>
                            <c:if test="${db.status(db.httpStatuses) gt 0.95}">
                                <label class="label label-success">alive</label>
                            </c:if>
                            <c:if test="${db.status(db.httpStatuses) lt 0.95 && db.status(db.httpStatuses) gt 0.05}">
                                <label class="label label-warning">unstable</label>
                            </c:if>
                            <c:if test="${db.status(db.httpStatuses) lt  0.05 }">
                                <label class="label label-danger">dead</label>
                            </c:if>
                        </td>
                        <td><c:if test="${db.publicationList.size() gt 0}">
                            <fmt:formatNumber value="${db.getZindex(db.httpStatuses, db.publicationList)}"
                                              maxFractionDigits="2"/>
                        </c:if>
                            <c:if test="${db.publicationList.size() eq 0}">
                                0
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <c:if test="${page>0}">
            <ul class="pagination pull-right">
                <c:choose>
                    <c:when test="${page-1>=1}">
                        <li><a href="${host}/database/browse?length=${length}&page=1&dataType=${dataType}&organism=${organism}&country=${country}">First</a></li>
                        <li><a href="${host}/database/browse?length=${length}&page=${page-1}&dataType=${dataType}&organism=${organism}&country=${country}">&laquo;</a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="disabled"><span>First</span></li>
                        <li class="disabled"><span>&laquo;</span></li>
                    </c:otherwise>
                </c:choose>
                <c:forEach var="i" begin="${pageLeft}" end="${pageRight}">
                    <c:choose>
                        <c:when test="${page==i}">
                            <li class="active"><span>${i}</span></li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="${host}/database/browse?length=${length}&page=${i}&dataType=${dataType}&organism=${organism}&country=${country}">${i}</a></li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
                <c:choose>
                    <c:when test="${page+1<=pageTotal}">
                        <li><a href="${host}/database/browse?length=${length}&page=${page+1}&dataType=${dataType}&organism=${organism}&country=${country}">&raquo;</a></li>
                        <li><a href="${host}/database/browse?length=${length}&page=${pageTotal}&dataType=${dataType}&organism=${organism}&country=${country}">Last</a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="disabled"><span>&raquo;</span></li>
                        <li class="disabled"><span>Last</span></li>
                    </c:otherwise>
                </c:choose>
            </ul>
        </c:if>
    </div>
</div>
<script src="${host}/static/js/select2.full.min.js"></script>
<script>
    $(document).ready(function () {
        $('.length option').each(function () {
            if ($(this).val() == ${length}) {
                $(this).attr('selected', true);
            }
        });

        $('.length').change(function () {
            var length = $('.length').val();
            console.log('a=' + length);
            window.location.href = '${host}/database/browse?length=' + length + '&page=${page}&dataType=${dataType}&organism=${organism}&country=${country}';
        });

        //select2
        $('#dataType').select2();
        $('#organism').select2();
        $('#country').select2();
    })
</script>
</body>
</html>
